<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>新闻发布系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .sidebar {
            width: 220px;
            background-color: #333;
            color: white;
            height: 100vh;
            position: fixed;
            padding-top: 20px;
        }
        .sidebar h3 {
            text-align: center;
            margin-bottom: 30px;
        }
        .sidebar ul {
            list-style: none;
            padding: 0;
        }
        .sidebar li {
            padding: 15px;
            margin: 10px 7px 0 6px;
            background-color: #444;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            transition: background-color 0.3s;
        }
        .sidebar li:hover {
            background-color: #555;
        }
        .content {
            margin-left: 220px;
            padding: 20px;
        }
        .content-area {
            background-color: white;
            border-radius: 5px;
            padding: 20px;
            margin-left: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .placeholder {
            color: #aaa;
            font-style: italic;
        }
        .profile-container, .news-container, .new-news-container {
            max-width: 800px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="sidebar">
    <h3>新闻发布系统</h3>
    <ul>
        <li onclick="showContent('person')">个人主页</li>
        <li onclick="showContent('newsList')">新闻信息列表</li>
        <li onclick="showContent('newNews')">新建新闻</li>
    </ul>
</div>

<div class="content">
    <div class="content-area" id="contentArea">
        <!-- 默认显示新闻信息列表 -->
        <div class="news-container">
            <div class="news-header">
                <h2>新闻信息列表</h2>
            </div>
            <div id="newsListContent">
                <!-- 新闻列表内容将由后端填充 -->
                <p class="placeholder">新闻列表内容将由后端填充</p>
            </div>
        </div>
    </div>
</div>

<script>
    function showContent(type) {
        var contentArea = document.getElementById('contentArea');

        // 清空内容区域
        contentArea.innerHTML = '';

        switch(type) {
            case 'person':
                // 个人主页内容
                contentArea.innerHTML = 
                    '<div class="profile-container">' +
                        '<div class="profile-header">' +
                            '<div class="profile-avatar">' +
                                '<img src="data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'120\' height=\'120\' viewBox=\'0 0 120 120\'%3E%3Crect width=\'120\' height=\'120\' fill=\'%23ddd\'/%3E%3Ctext x=\'60\' y=\'60\' font-family=\'Arial\' font-size=\'16\' text-anchor=\'middle\' dominant-baseline=\'middle\' fill=\'%23999\'%3E头像占位符%3C/text%3E%3C/svg%3E" alt="用户头像">' +
                            '</div>' +
                            '<div class="profile-info">' +
                                '<h2 class="placeholder">用户名</h2>' +
                                '<p class="placeholder">用户职称</p>' +
                                '<div class="profile-stats">' +
                                    '<div class="stat">' +
                                        '<div class="stat-value placeholder">0</div>' +
                                        '<div class="stat-label">已发布</div>' +
                                    '</div>' +
                                    '<div class="stat">' +
                                        '<div class="stat-value placeholder">0</div>' +
                                        '<div class="stat-label">浏览量</div>' +
                                    '</div>' +
                                    '<div class="stat">' +
                                        '<div class="stat-value placeholder">0</div>' +
                                        '<div class="stat-label">关注者</div>' +
                                    '</div>' +
                                '</div>' +
                            '</div>' +
                        '</div>' +

                        '<div class="profile-section profile-bio">' +
                            '<h3>个人简介</h3>' +
                            '<p class="placeholder">这里是用户的个人简介...</p>' +
                        '</div>' +

                        '<div class="profile-section profile-details">' +
                            '<h3>个人信息</h3>' +
                            '<div class="detail-item">' +
                                '<div class="detail-label">用户名:</div>' +
                                '<div class="detail-value placeholder">未设置</div>' +
                            '</div>' +
                            '<div class="detail-item">' +
                                '<div class="detail-label">邮箱:</div>' +
                                '<div class="detail-value placeholder">未设置</div>' +
                            '</div>' +
                            '<div class="detail-item">' +
                                '<div class="detail-label">电话:</div>' +
                                '<div class="detail-value placeholder">未设置</div>' +
                            '</div>' +
                            '<div class="detail-item">' +
                                '<div class="detail-label">注册时间:</div>' +
                                '<div class="detail-value placeholder">未设置</div>' +
                            '</div>' +
                        '</div>' +

                        '<div class="profile-actions">' +
                            '<button class="edit-btn">编辑资料</button>' +
                            '<button class="logout-btn">退出登录</button>' +
                        '</div>' +
                    '</div>';
                break;
            case 'newsList':
                // 新闻信息列表内容
                contentArea.innerHTML = 
                    '<div class="news-container">' +
                        '<div class="news-header">' +
                            '<h2>新闻信息列表</h2>' +
                        '</div>' +
                        '<div id="newsListContent">' +
                            '<p class="placeholder">新闻列表内容将由后端填充</p>' +
                        '</div>' +
                    '</div>';
                break;
            case 'newNews':
                // 新建新闻内容
                contentArea.innerHTML = 
                    '<div class="new-news-container">' +
                        '<div class="new-news-header">' +
                            '<h2>新建新闻</h2>' +
                        '</div>' +
                        '<div id="newNewsContent">' +
                            '<p class="placeholder">新建新闻内容将由后端填充</p>' +
                        '</div>' +
                    '</div>';
                break;
        }
    }
</script>
</body>
</html>